import { Component } from "react";
import { ScrollView, View  } from "@tarojs/components";

import Taro from '@tarojs/taro';

import "./index.scss";

class App extends Component {
  onScrollToUpper() {}

  // or 使用箭头函数
  // onScrollToUpper = () => {}

  onScroll(e) {
    console.log(e.detail);
  }
  buttonClick= () => {
    Taro.navigateTo({
      url: '/pages/button-demo/index'
    })
  }
  checkboxClick=()=>{
    Taro.navigateTo({
      url: '/pages/checkbox-demo/index'
    })
  }

  render() {
    
    const scrollTop = 0;
    const Threshold = 20;
    const vStyleA = {
      height: "30px",
      lineHeight: "30px",
      borderBottom: "1px solid",
    };
 
    const scrollview = {};
 
    return (
      <View className='con'>
        <View className='top'>上</View>
        <View className='scroll'>
          <ScrollView
            className={scrollview}
            scrollY
            scrollWithAnimation
            scrollTop={scrollTop}
            lowerThreshold={Threshold}
            upperThreshold={Threshold}
            onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
            onScroll={this.onScroll}
          >
            <View style={vStyleA} onClick={ this.buttonClick }>Button</View>
            <View style={vStyleA} onClick={ this.checkboxClick }>checkbox</View>
  
          </ScrollView>
        </View>
        <View className='bottom'>下</View>
      </View>
    );
  }
}

export default App;
